<template>
	<view>
		<nav-box :title="type == 1 ? '考场管理' : '成绩管理'"></nav-box>
		<view class="content">
			<view class="title-box">
				<view class="title">{{ info.title }}</view>
				<text>考试场次</text>
				<text>考试状态</text>
			</view>
			<!-- 考场管理操作 -->
			<view class="control-box" v-show="type == 1">
				<text class="title">管理操作</text>
				<view class="control-list">
					<view class="control-item" v-for="(item, index) in controlList" :key="index" @click="control(index)">
						<image :src="item.img" mode=""></image>
						<text>{{ item.text }}</text>
					</view>
				</view>
			</view>
			<view class="exam-info">
				<text class="title">考试信息</text>
				<view class="info-box">
					<text>开始时间：{{info.startTime}}</text>
					<text>结束时间：{{info.endTime}}</text>
					<text>试卷模式：{{info.pattern}}</text>
					<text>考试时长：{{info.examLength}}分钟</text>
					<text>考场密码：{{info.password}}</text>
				</view>
			</view>
			<view class="exam-state">
				<text class="title">考场状态</text>
				<view class="info-box">
					<text>总计人数：{{info.count}}</text>
					<text>缺考人数：{{info.missTest}}</text>
					<text>在考人数：{{info.onTest}}</text>
					<text>交卷人数：{{info.finishTest}}</text>
				</view>
			</view>
			<!-- 成绩管理操作 -->
			<view class="control-box" v-show="type == 2">
				<text class="title">管理操作</text>
				<view class="control-list-two">
					<view class="control-item" v-for="(item, index) in controlList" :key="index" @click="control(index)">
						<image :src="item.img" mode=""></image>
						<text>{{ item.text }}</text>
					</view>
				</view>
			</view>
		</view>
		<u-modal 
			v-model="show" 
			:title="modalTitle" 
			:show-cancel-button="true" 
			cancel-color="#2979ff"
			:cancel-text="cancelText"
			:confirm-text="confirmText"
			@confirm="modalConfirm"
			@cancel="modalCancel"
			>
			<view class="u-text-center u-p-30">{{content}}</view>
			</u-modal>
	</view>
</template>

<script>
export default {
	data() {
		return {
			type: null, //1 考场管理  2成绩管理
			current: null, //当前选择的操作按钮
			show: false,
			content: '',
			modalTitle: '',
			cancelText: '取消',
			confirmText: '确认',
			info: {},
			controlList: [
				{
					text: '更换密码',
					img: '../../../static/images/genghuanmima.png'
				},
				{
					text: '管理考生',
					img: '../../../static/images/guanlikaosheng.png'
				},
				{
					text: '考生签到',
					img: '../../../static/images/kaoshengqiandao.png'
				},
				{
					text: '关闭预约',
					img: '../../../static/images/guanbiyuyue.png'
				},
				{
					text: '结束考试',
					img: '../../../static/images/jieshukaoshi.png'
				}
			]
		};
	},
	onLoad(options) {
		this.type = options.type
		if (options.type == 2) {
			this.controlList = [
				{
					text: '发布成绩',
					img: '../../../static/images/fabuchengji.png'
				},
				{
					text: '管理成绩',
					img: '../../../static/images/guanlichengji.png'
				}
			]
		}
		// 获取上层传过来的考场id走接口替换测试数据
		this.info = {
			id: 1,
			title: '2021年春季测评考试',
			startTime: '2021/9/01 13:21',
			endTime: '2021/9/01 13:21',
			count: 100, //总计人数
			onTest: 50, //在考人数
			missTest: 20, //缺考人数
			finishTest: 20, //交卷人数
			pattern: '万人万卷', //试卷模式
			examLength: 20, //考试时长
			password: '2233' //考场密码
		};
	},
	methods: {
		// 点击操作按钮
		control(index) {
			// 考场管理
			if (this.type == 1) {
				this.show = index == 0 || index == 3 || index == 4
				this.current = index
				this.modalTitle = ''
				this.confirmText = '确定'
				this.content = index == 0 ? this.info.password : index == 3 ? '您确认要关闭该场考试的预约吗' : index == 4 ? '您确认要结束本场考试吗' : ''
				// 更换密码
				if (index == 0) {
					this.modalTitle = '签到码'
					this.content = this.info.password
					this.confirmText = '重新获取'
				}
				// 管理考生
				if (index == 1) {
					// 把考场id带到下一页
					uni.navigateTo({
						url: `../examineeManagement/examineeManagement?type=${this.type}&id=${this.id}`
					})
				}
				// 考生签到 调取企业微信扫一扫
				if (index == 2) {
					
				}
			} else {
				// 成绩管理
				if (index == 0) {
					this.show = true
					this.content = '确定发布成绩吗'
				} else {
					// 把成绩id带到下一页
					uni.navigateTo({
						url: `../examineeManagement/examineeManagement?type=${this.type}&id=${this.id}`
					})
				}
			}
		},
		// 弹框确认操作
		modalConfirm() {
			if (this.type == 1) {
				if (this.current == 0) {
					// 走接口获取新的考场密码替换原密码
					this.info.password = this._.random(1000, 9999)
				}
				if (this.current == 3) {
					// 走关闭考试预约接口
					
				}
				if (this.current == 4) {
					// 走结束考试接口
						
				}
			} else {
				if (this.current == 0) {
					// 走发布成绩接口
					
				}
			}
			
			
		},
		// 弹框取消操作
		modalCancel() {
			this.current = null
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	background-color: #ffffff;
	.title-box {
		padding: 48upx 40upx;
		border-bottom: 12upx solid #f7f7f9;
		font-size: 24upx;
		color: #9d9d9d;
		.title {
			font-size: 32upx;
			color: #4b4b4b;
			margin-bottom: 8upx;
		}
		text {
			display: inline-block;
			margin-right: 20upx;
		}
	}
	.control-box {
		padding: 48upx 40upx;
		border-bottom: 12upx solid #f7f7f9;
		color: #4b4b4b;
		.title {
			display: inline-block;
			margin-bottom: 24upx;
		}
		.control-list {
			display: flex;
			justify-content: space-between;
			text-align: center;
			image {
				width: 80upx;
				height: 80upx;
				margin-bottom: 16upx;
			}
			.control-item {
				text {
					display: block;
					color: #a4a4a4;
					font-size: 22upx;
				}
			}
		}
	}
	
	.control-list-two {
		@extend  .control-list;
		justify-content: start !important;
		.control-item {
			margin-right: 70upx;
		}
	}
	.exam-info, .exam-state {
		padding: 32upx 40upx;
		border-bottom: 12upx solid #f7f7f9;
		color: #969696;
		.title {
			color: #4B4B4B;
			display: inline-block;
			margin-bottom: 32upx;
		}
		.info-box {
			text {
				display: block;
				margin-bottom: 20upx;
			}
		}
	}
	.exam-state .info-box {
		display: flex;
		flex-wrap: wrap;
		text {
			width: 50%;
		}
	}
}
</style>
